echarts图渲染大量数据崩溃 您所在的位置:网站首页 layui 渲染大数据 echarts图渲染大量数据崩溃

echarts图渲染大量数据崩溃

2023-08-19 23:34| 来源: 网络整理| 查看: 265

项目需求,一个echart图要渲染两三万个点,绘制折线图。接口相应速度、数据处理速度都很快,唯独是UI层面的渲染特别卡顿,web端勉强能接受,app端之间卡死。查阅文档,询问大神,最终寻得如下的解决方案。

非技术类 最好的解决方案是更改产品需求(哈哈,开发人员跟产品开撕的时刻哦…)加loading,提高用户交互体验(治标不治本,无法解决本质问题) 技术类

虽然这次开发,选用的是echarts,剩余的还有highchart、chart,但是我都没有实际去尝试,因为本身现有的chart类库都是基于某一款二维绘制引擎去封装的,比如echarts的二维引擎是zrender,zrender本身是可以给予canvas或者svg,所以层层封装,注定了渲染UI的时候会有各种延时,那么如果用canvas或者svg之间绘制呢,我没有实验,因为图表上还会有各种交互,嫌麻烦,最为保底方案,暂不尝试!

sampling 降采样渲染 官方提供的方法,亲测有效,降采样直接取平均值,肉眼可见的app不会卡死,两万五千多个点渲染速度约3s(app渲染时间不好监控,没有截图)在这里插入图片描述

更改datazoom的startValue、endValue 这么做的目的就是一次性渲染一部分数据,相当于分段渲染,查看的时候拖动datazoom,也是分段查看,效果没有一次性看整体的好,不过也是看项目需求。

appendData 主要支持ECharts GL,基础版本只支持 散点图(scatter) 和 线图(lines),注意是lines,不是line!(看错一个单词还试了半天的)在这里插入图片描述

2022-09-05 补充

最近项目测试过程中发现sampling降采样用的average会带来一个bug。降采样的过程中,会自动略掉很多的数值,直接影响y轴对应的最大值,缩放栏操作的时候,降采样忽略的最值可能大于初始化显示的最值,所以仔细阅读文档,保留极值,可以用lttb



【本文地址】

公司简介

联系我们

今日新闻

    推荐新闻

    专题文章
      CopyRight 2018-2019 实验室设备网 版权所有